<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../res/css/weui.css" />
    <link rel="stylesheet" href="../res/css/weuix.css" />
	<link rel="stylesheet" href="../res/css/common.css" />
    <!-- <title></title> -->
	<script src="../res/js/zepto.min.js"></script>
	<script src="../res/js/zepto.weui.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="../res/js/vue.min.js"></script>
	<script src="../res/js/common.js?v=1"></script>

    <style>
        body{
            height: 100%;
        }
        #app{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-height: 100%;
        }
        .top-bar{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index: 9;
            height: 46px;
            box-shadow: 0 0 8px -4px #e0e0e0;
        }
        .tab-list {
            display:flex; 
            text-align:center; 
            width:100%; 
            font-size:14px;
            background-color: #fff;
            position: fixed;
            top: 46px;
            left: 0;
        }
        .order-state{
            flex:1; 
            height:30px; 
            line-height:30px;
            margin-bottom: 2px;
        }
        .order-state::after{
            display: block;
            content: ' ';
            height: 2px;
            background-color: #fff;
        }
        .order-state.active::after{
            background-color: #1189ff;
        }

        .order-list {
            overflow-y: auto;
            padding-top: 30px;
        }
        .order-item {
            margin: 10px 15px;
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
        }

        .order-item {
            background-color: #fff;
            margin: 15px;
            padding: 10px;
            border-radius: 8px;
        }

        .order-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .order-item-top > span, .order-item-top > div {
            font-size: 13px;
        }
        .order-item-top img {
            margin-right: 5px;
            width: 25px;
            height: 25px;
        }

        .order-item-middle {
            display: flex;
            margin-top: 10px;
            align-items: center;
        }

        .order-item-middle img {
            width: 50px;
            height: 50px;
        }

        .middle-doctor-info {
            display: flex;
            flex: 1;
            flex-direction: column;
            margin-left: 5px;
        }
        .order-info-box > div{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <main id="app">
        <div class="weui-btn_primary weui-header top-bar">
            <div class="weui-header-left"><a class="icon icon-109" @click="pageBack"></a></div>
            <h1 class="weui-header-title">问诊订单</h1>
        </div>
        <div class="tab-list">
            <div v-for="item in tabList" :key="item.index" :class="['order-state', {active: tab == item.index}]" @click="changeTab(item.index)">{{item.name}}</div>
        </div>
        <div class="order-list" @scroll="getScroll" :style="{height: `${window.innerHeight - 46 - 30}px`}">
            <div class="order-item" v-for="item in list" :key="item.id">
                <div class="order-item-top">
                    <div style="display: flex; align-items: center;">
                      <img :src="filterinquiryType(item.inquiryType, 'img')" mode=""/>
                      <span>{{filterinquiryType(item.inquiryType, 'text')}}</span>
                    </div>
                    <div>{{filterOrderState(item.orderState)}}</div>
                </div>
                <div class="order-item-middle">
                    <div style="font-size: 0; border-radius: 50%; overflow: hidden;"><image :src="item.doctorHeadImg" mode=""/></div>
                    <div class="middle-doctor-info">
                      <div style="font-weight: bold; margin-bottom: 10rpx;">{{item.doctorName}}</div>
                      <div style="font-size: 14px;">{{item.doctorJobTitle}} | {{item.departmentName}}</div>
                    </div>
                    <div style="font-weight: bold;">￥ {{item.price}}</div>
                </div>
                <div class="order-info-box">
                    <div>
                      <div>订单编号：</div>
                      <div>{{item.orderNo}}</div>
                    </div>
                    <div>
                      <div>创建时间：</div>
                      <div>{{item.createTime}}</div>
                    </div>
                    <div v-if="item.payTime">
                      <div>支付时间：</div>
                      <div>{{item.payTime}}</div>
                    </div>
                    <div v-if="item.transactionId">
                      <div>支付流水号：</div>
                      <div>{{item.transactionId}}</div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
<script>
new Vue({
    el: '#app',
    data: {
        tabList: [{
            name: '全部',
            index: ''
        }, {
            name: '待付款',
            index: '0'
        }, {
            name: '已支付',
            index: '1'
        }, {
            name: '已退款',
            index: '-1'
        }],
        tab: '',
        list: [],
        params: {
            "current": 1,
            "orderState": "",
            "size": 10
        },
        noMore: false
    },
    methods: {
        pageBack(){
            history.back()
        },
        getScroll(e) {
            let {scrollTop, clientHeight, scrollHeight} = e.target
            if (scrollTop + clientHeight >= scrollHeight) {
                if (!this.noMore) { 
                    console.log('到底了')
                    this.params.size = this.params.size + 10
                    this.getList()                   
                } else {
                    // msgInfo("到底啦！");
                }
            }
        },
        changeTab(index) {
            window.scrollTo(0, 0)
            this.tab = index
            this.params.orderState = index
            this.params.size = 10
            this.noMore = false
            this.list = []
            this.getList()
        },
        getList() {
            newAjaxPost('/h5/order/queryInquiryOrderListPage', this.params,(res) => {
                let {total, list} = res.data
                if (total > this.list.length) {
                    this.list = list
                } else {
                    this.noMore = true
                }
			})
        },
        filterinquiryType (inquiryType, reType) {
            var text = ''
            var img = ''
            switch (inquiryType) {
                case 1:
                text = '视频问诊'
                img = '../res/images/img_video@2x.png'
                break;
                case 2:
                text = '图文问诊'
                img = '../res/images/img_image@2x.png'
                break;  
                case 3:
                text = '家庭医生'
                img = '../res/images/img_doctor@2x.png'
                break;  
                case 4:
                text = '复诊'
                img = '../res/images/img_consulting@2x.png'
                break;  
                default:
                break;
            }
            return reType === 'text' ? text : img
        },
        filterOrderState (type) {
            var text = ''
            switch (type) {
                case '-1':
                text = '已退款'
                break;
                case '0':
                text = '待支付'
                break;
                case '1':
                text = '已支付'
                break;   
                default:
                break;
            }
            return text
        }
    },
    mounted(){
        this.getList()
    }
})
</script>

</html>